<template>
	<el-row class="cons">
		<el-col :span="22">
			<el-row>
				<el-col :span="23" :offset="1">
					<el-menu :default-active="activeIndex2" lass="el-menu-demo" mode="horizontal" @select="handleSelect"
						text-color="#B9B9B9" active-text-color="#2A2A2A" style="font-weight: bold;letter-spacing: 2px;">
						<el-menu-item index="1" style="font-size: 19px;">首页</el-menu-item>
						<!-- <el-menu-item index="2" style="font-size: 19px;">中华粮网</el-menu-item>
						<el-menu-item index="3" style="font-size: 19px;">基础数据</el-menu-item> -->
						<el-menu-item index="2" style="font-size: 19px;">会员中心</el-menu-item>
					</el-menu>
				</el-col>
			</el-row>
		</el-col>
		<el-col :span="2" class="loginBtn">
			<el-menu default-active="1" lass="el-menu-demo" mode="horizontal"
			v-if="nickName != null"
				text-color="#B9B9B9" active-text-color="#2A2A2A" style="font-weight: bold;letter-spacing: 2px;">
				<el-submenu index="2">
          <span slot="title" style="font-size: 19px;"> {{nickName}}</span>
          <el-menu-item index="2-1" style="font-size: 15px;text-align: center;"><span @click="signOut()">退出登录</span></el-menu-item>
          <!-- <el-menu-item index="1" style="font-size: 19px;">{{nickName}}</el-menu-item> -->
          </el-submenu>

				<!--  -->
			</el-menu>
			<el-button v-else type="success" @click="login()">登录</el-button>
		</el-col>
	</el-row>
</template>

<script>
	export default {
		name: 'headers',
		data() {
			return {
				activeIndex: '1',
				activeIndex2: '1',
				/*userinfo得信息*/
				username: null,
        nickName:null,
			};
		},
		mounted() {
			// 从本地取userInfo得数据
			if(localStorage.getItem('username')){
				this.username = localStorage.getItem('username');
        this.nickName = localStorage.getItem('nickName');
			}
		},
		methods: {
			handleSelect(key, keyPath) {
				if (key == 2) {
					this.$router.push({
						name: 'member'
					})
				}
			},
			login() {
				this.$router.push({
					name: 'Login'
				})
			},
			signOut(){
				// 清除所有缓存
				localStorage.clear();
				this.$router.push({path:'/'})
			}
		}
	}
</script>

<style lang="scss" scoped>
  .el-menu--horizontal>.el-submenu {
    padding-top: 3vh;
  	height: 9vh;
  	line-height: 12vh;
  }
	.el-menu--horizontal>.el-menu-item {
		height: 12vh;
		line-height: 12vh;
	}
	.cons{
		background-color: #ffffff;
	}
	.loginBtn {
		// 	height: 15vh;

		button {
			width: 50%;
			height: 4.5vh;
			border-radius: 2.5vh;
			margin-top: 1.75vh;
			font-weight: bold;
			font-size: 19px;
			background-color: #1AC7B6;
		}
	}
</style>
